<template>
  <div class="box">
    <div class="pic">
      <img src="../assets/bbt.png" alt="" />
    </div>
    <main>
      <van-tabs v-model="active">
        <van-tab title="正在抢购" v-model="status">
          <div class="good" v-for="(item, index) in list" :key="index">
            <div class="img-box">
              <img :src="item.picUrl" alt="" />
            </div>
            <section>
              <h2>{{ item.name }}</h2>
              <div class="price">
                <span style="color: orange">{{ item.star }}</span
                >&nbsp;&nbsp;
                <span>月售{{ item.sale }}</span>
              </div>
              <div class="desc">
                <span>{{ item.desc }}</span>
                <span>{{ item.distance }}{{ item.yuan }} </span>
                &nbsp;
                <span>{{ item.desc1 }}</span>
                <span style="color: orange">{{ item.distance1 }}km</span>
              </div>
            </section>
          </div>
        </van-tab>
        <van-tab title="上新预告" v-model="status" @click="predict(status)"
          >上新预告222
          <div class="good" v-for="(item, index) in list" :key="index">
            <div class="img-box">
              <img :src="item.pic" alt="" />
            </div>
            <section>
              <h2>{{ item.name }}</h2>
              <div class="price">
                <span style="color: orange">{{ item.star }}</span
                >&nbsp;&nbsp;
                <span>月售{{ item.sale }}</span>
              </div>
              <div class="desc">
                <span>{{ item.desc }}</span>
                <span>{{ item.distance }}{{ item.yuan }} </span>
                &nbsp;
                <span>{{ item.desc1 }}</span>
                <span style="color: orange">{{ item.distance1 }}km</span>
              </div>
            </section>
          </div>
        </van-tab>
      </van-tabs>
    </main>
    <div>
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import Footer from "@/components/Footer.vue";
import "../assets/bbt.png";
import { tuan_list } from "../api";

export default {
  name: "BBT",
  data() {
    return {
      status: 0,
      active: 2,
      list: [
      /*   {
         pic: "http://5b0988e595225.cdn.sohucs.com/images/20190110/ff83a6ebbdda41a1aad6dc97d9c6873b.jpeg",
          name: "金百家烤鸭（苏家坨店）",
          star: "4.3",
          sale: "1632",
          desc: "起送￥20",
          distance: "起送距离￥3",
          yuan: "￥6",
          desc1: "47分钟",
          distance1: "3.9",
          price: 88880,
          status: 0, 
        }, */
      ],
    };
  },
  components: {
    Footer,
  },
  methods: {
    predict(status) {
      this.status = 1;
      tuan_list(this.status).then((res) => {
        console.log(res.data.status);
      });
    },
  },

  created() {
    tuan_list(status).then((res) => {
      console.log(res.data.status);
      this.list = res.data.list
    });
  },
};
</script>

<style scoped>
.pic {
  width: 100%;
  height: 200px;
}
.pic > img {
  width: 100%;
  height: 200px;
}
main .good {
  display: flex;
  height: 120px;
  background-color: rgb(251, 251, 251);
  margin: 10px;
  border-radius: 15px;
  /* justify-content: space-between; */
}

main .good {
  display: flex;
  height: 100px;
  background-color: rgb(251, 251, 251);
  margin: 5px 0 5px;
  border-radius: 5px;
  /* justify-content: space-between; */
}
main .good .img-box {
  width: 65px;
  height: 75px;
  margin-top: 12.5px;
  /* border: 1px solid red; */
  margin-right: 5px;
}
main .good .img-box img {
  width: 65px;
  height: 75px;
}
main .good section {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
main .good h2 {
  font-size: 16px;
}
main .good .price {
  font-size: 14px;
  color: gray;
}
main .good .desc {
  font-size: 10px;
  color: gray;
}
main .good .text {
  flex: 1;
}
</style>